<template>
	<view class="login">
		<image src="/static/logo.png"></image>
		<view class="text">请登录YOLO博客</view>
		<u--form labelPosition="left" :model="form" :rules="rules" ref="form">
			<u-form-item prop="name" borderBottom leftIcon="account-fill" ref="item2" v-if="change" leftIconStyle="font-size:22px">
				<u--input v-model="form.name" border="none" placeholder="请输入昵称" clearable></u--input>
			</u-form-item>
			<u-form-item prop="phone" borderBottom leftIcon="phone" ref="item1"  leftIconStyle="font-size:22px">
				<u--input v-model="form.phone" border="none" placeholder="请填写手机号" clearable></u--input>
			</u-form-item>
			<u-form-item prop="password" borderBottom leftIcon="lock" ref="item1"  leftIconStyle="font-size:22px">
				<u--input type="password" v-model="form.password" border="none" placeholder="请输入密码" clearable>
				</u--input>
			</u-form-item>
			<u-form-item prop="passwordAgain" borderBottom leftIcon="lock-fill" ref="item2"  v-if="change"  leftIconStyle="font-size:22px">
				<u--input type="password" v-model="form.passwordAgain" border="none" placeholder="请再次输入密码" clearable>
				</u--input>
			</u-form-item>
		</u--form>
		<view class="Button">
			<u-button type="primary" text="登录" color="#ff9048" @click="submit"></u-button>
			<u-button type="primary" text="注册" :plain="true" color="#ff9048" @click="register"></u-button>
		</view>
	</view>
</template>

<script>
	import {login,register} from "@/config/api.js"
	import {
		mapMutations
	} from 'vuex'
	
	export default {
		name: "login",
		data() {
			return {
				change:false,
				form: {
					phone: '',
					password: '',
					name:'',
					projectId:165,			
					passwordAgain:''
				},
				rules: {
					name:{
							type: 'string',
							required: true,
							message: '此处不能为空',
							trigger: ['blur', 'change']
						},
					phone: [{
							type: 'string',
							required: true,
							message: '此处不能为空',
							trigger: ['blur', 'change']
						},
						{
							pattern:/^1[3456789]\d{9}$/,
							message: '请输入正确手机号',
							trigger: ['blur', 'change']
						}
					],
					password: [{
						type: 'string',
						required: true,
						message: '此处不能为空',
						trigger: ['blur', 'change']
					}, {
						min: 6,
						max: 10,
						message: '长度在6-10个字符之间',
						trigger: ['blur', 'change']
					}],
					passwordAgain: [{
						type: 'string',
						required: true,
						message: '此处不能为空',
						trigger: ['blur', 'change']
					},
					{
						min: 6,
						max: 10,
						message: '长度在6-10个字符之间',
						trigger: ['blur', 'change']
					},{
						validator: (rule, value, callback) => {
							// 为false就不通过
							return this.form.password === this.form.passwordAgain
					},
						message: '两次输入的密码不一致',
						trigger: ['blur', 'change']
					}]
				},
				radio: '',
				switchVal: false
			}
		},
		methods: {
			...mapMutations(["setUserInfo"]),
			
			// 一个按钮实现两个功能：切换&请求数据=>使用if else
			// 点击登录
			async submit() {
			// 注册页面点击登录显示隐藏
				if(this.change){
					this.change=false
				}else{
					// 捕捉错误，并对错误进行操作
					try{
						// 校验表单基础格式是否正确
						await this.$refs.form.validate()
						
						 const user=await login(this.form)                                          
						 console.log(user);
						 
						 // 存入vuex
						 this.setUserInfo(user.data)
				
						uni.showToast({
							title: "登录成功"
						})
						
						// 此处触发自定义事件
						this.$emit('showLogin')
					  }
					  catch(error){
						  if(error.data.code!==200) return uni.showToast({
								title: error.data.msg,
								icon: "error"
							})
						}
					 }
			},
			// 点击注册
			async register(){
				if(!this.change){
					// 注册页面显示隐藏
					this.change=true
				}else{
					await this.$refs.form.validate()	
					const newUser=await register(this.form)
					// console.log(newUser);
					
					uni.showToast({
						title: "注册成功"
				})
				
				this.change=false
				}
			}		
		}
	}
</script>

<style lang="scss">
	.login {
		width: 65%;
		margin: 0 auto;
		padding:30px;
		background-color:#fff;
		border-radius: 10px;
		.text {
			font-size: 24px;
			font-weight: 500;
			margin-bottom: 15px;
			text-align: center
		}

		image {
			width: 40vw;
			height: 40vw;
			margin: 0 auto;
			display: block;
		}
		.Button {
			margin-top: 7%;
			height: 90px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

	}		
</style>
